import React, { useState, useEffect } from 'react';
import Breadcrumb from 'components/common/Breadcrumb';
import './index.less';
import Area from 'components/Area';
import { useRequest } from 'ahooks';
import { getAllLifting, getLiftingByArea, ILifting, LiftingStatus } from 'api/Lifting';
import { Card, Progress } from 'antd';
const OperationCheck = () => {
    const [selectedArea, setSelectedArea] = useState(0);
    const { data: allLiftings = [] } = useRequest(getAllLifting);
    console.table(allLiftings);
    const [areaLiftings, setAreaLiftings] = useState<ILifting[]>([]);
    useEffect(() => {
        if (selectedArea === 0) return;
        getLiftingByArea({ id: selectedArea }).then((res: ILifting[]) => {
            setAreaLiftings(res);
            console.table(res);
        });
    }, [selectedArea]);
    const renderStatus = (status: number) => {
        if (status === -1) {
            return <span>欠压/过电</span>
        } else if (status === 0) {
            return <span>正常</span>
        }
    }
    return (
        <div className="operation-check">
            <Breadcrumb crumbs={['智能管控', '运维自检']}></Breadcrumb>
            <div className="flex">
                <Area selectedArea={selectedArea} setSelectedArea={setSelectedArea}></Area>
                <div className="right-liftings">
                    {allLiftings.map((lifting: ILifting) => (
                        <Card key={lifting.id} className="lifting-card" hoverable>
                            <div>
                                <span className="mr40 bold">控制箱IP: </span>
                                <span>{ lifting.ipAddress }</span>
                            </div>
                            <div>
                                <span className="mr40 bold">运行电压: </span>
                                { renderStatus(lifting.status) }
                            </div>
                            <div>
                                <span className="mr10 bold">应急电源电量: </span>
                                <Progress percent={80} style={{ width: '60%' }} showInfo={false}/>
                            </div>
                        </Card>
                    ))}
                </div>
            </div>
        </div>
    );
};
export default OperationCheck;
